<script setup>
import {ref} from 'vue';
import Trade from './module/trade.vue';
import Task from './module/task.vue';
import Consultation from './module/consultation.vue';
import Hitchhiker from './module/hitchhiker.vue';
import Booking from './module/booking.vue'

/* 当前模块 */
const currentTabIndex = ref(0);
const modules = ['找搭子', '共享预约', '任务大厅', '资讯', '二手交易'];
const isPC = () => (!!alert);
</script>

<template>
  <div class="home">
    <div :class="['modules', 'content', isPC() ? 'H5-sticky' : 'WEIXIN-sticky']">
      <div
          v-for="(item, index) in modules"
          :class="['module', 'f-color', 'link', { 'active': currentTabIndex === index }, { 'f-active-color': currentTabIndex === index }]"
				:key="index"
          @click="currentTabIndex = index"
			>
        {{ item }}
      </div>
    </div>
    <div v-if="currentTabIndex === 0" class="content">
      <Hitchhiker class="children"></Hitchhiker>
    </div>
    <div v-else-if="currentTabIndex === 1" class="content" style="background: #eeeeee">
      <Booking class="children"></Booking>
    </div>
    <div v-else-if="currentTabIndex === 2" class="content" style="background: #eeeeee">
      <Task class="children"></Task>
    </div>
    <div v-else-if="currentTabIndex === 3" class="content" style="background: #eeeeee">
      <Consultation class="children"></Consultation>
    </div>
    <div v-else class="content" style="background: #eeeeee">
      <Trade class="children"></Trade>
    </div>
  </div>
</template>

<style scoped>
.modules {
  width: 100vw;
  height: 40px;
  background-color: rgb(248, 248, 248);
  display: flex;
  justify-content: space-between;
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  z-index: 999999;
}

.H5-sticky {
  position: sticky;
  top: 43px;
}

.WEIXIN-sticky {
  position: sticky;
  top: 0;
}

.module {
  display: inline;
  height: 100%;
  align-items: center;
  font-size: 16px;
}

.module:last-child {
  margin-right: 0;
}

.active {
  position: relative;
}

.active::after {
  content: '';
  display: block;
  left: 0;
  right: 0;
  height: 3px;
  background-color: blue;
  border-radius: 50px;
  position: absolute;
  bottom: -10px;
  animation: active 0.4s;
  animation-fill-mode: both;
}

@keyframes active {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
</style>
